

<template>
  <div 
    ref="containerRef" 
    class="responsive-grid-container"
    :style="{ padding: `${containerPadding}px` }"
  >
    <div 
      class="responsive-grid"
      :style="gridStyle"
    >
      <slot 
        :items-per-row="itemsPerRow"
        :container-width="containerWidth"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useGridLayout, type GridLayoutOptions } from '../utils/gridLayout'

interface Props extends GridLayoutOptions {
  rowsPerPage?: number
}

const props = withDefaults(defineProps<Props>(), {
  gap: 8,
  defaultPerRow: 1,
  containerPadding: 0,
  rowsPerPage: 3
})

const containerRef = ref<HTMLElement | null>(null)

const { itemsPerRow, containerWidth, updateLayout } = useGridLayout(containerRef, {
  minItemWidth: props.minItemWidth,
  gap: props.gap,
  defaultPerRow: props.defaultPerRow,
  containerPadding: props.containerPadding
})

const gridStyle = computed(() => ({
  display: 'grid',
  gridTemplateColumns: `repeat(${itemsPerRow.value}, 1fr)`,
  gap: `${props.gap}px`,
  width: '100%'
}))

// 暴露给父组件的方法和属性
defineExpose({
  itemsPerRow,
  containerWidth,
  updateLayout
})
</script>

<style scoped>
.responsive-grid-container {
  width: 100%;
  box-sizing: border-box;
}

.responsive-grid {
  width: 100%;
}
</style>